<template>
  <toolbar class="toolbar">
<!--    <template v-if="!readOnly">-->
<!--      <toolbar-button command="undo" text="撤销" />-->
<!--      <toolbar-button command="redo" text="重做" />-->
<!--      <toolbar-button command="copy" text="复制" />-->
<!--      <toolbar-button command="paste" text="粘贴" />-->
<!--      <div class="split" />-->
<!--    </template>-->
<!--    <toolbar-button command="zoomIn" icon="zoom-in" text="放大" />-->
<!--    <toolbar-button command="zoomOut" icon="zoom-out" text="缩小" />-->
<!--    <toolbar-button command="autoZoom" icon="fit" text="自适应" />-->
<!--    <toolbar-button command="resetZoom" icon="actual-size" text="实际尺寸" />-->
<!--    <template v-if="!readOnly">-->
<!--      <div class="split" />-->
<!--      <toolbar-button command="toBack" icon="to-back" text="向下一层" />-->
<!--      <toolbar-button command="toFront" icon="to-front" text="向上一层" />-->
<!--      <toolbar-button command="addGroup" icon="group" text="编组" />-->
<!--      <toolbar-button command="unGroup" icon="ungroup" text="取消编组" />-->
<!--      <toolbar-button command="selectAll" icon="select-all" text="全选" />-->
<!--      <toolbar-button command="multiSelect" icon="select" text="框选" />-->
<!--      <div class="split" />-->
<!--      <toolbar-button command="delete" text="删除" label="删除数据" />-->
<!--      <toolbar-button command="clear" icon="clear" text="清空画布" />-->
<!--    </template>-->
    <!-- right toolbar button -->
    <div class="pull-right" style="height:20px;">
      <toolbar-button
        command="generateData"
        text="生成数据"
        label="保存数据"
      />
<!--      <toolbar-button-->
<!--        command="downloadImage"-->
<!--        text="下载图像"-->
<!--        label="下载图像"-->
<!--      />-->
<!--      <button @click.prevent="handleToggleReadOnly">-->
<!--        {{ readOnly ? '编辑模式' : '只读模式' }}-->
<!--      <div class="pull-right" style="height:20px;">-->
<!--        <toolbar-button-->
<!--          command="generateData"-->
<!--          icon="save"-->
<!--          text="生成数据"-->
<!--          label="保存数据"-->
<!--        />-->
<!--        <toolbar-button-->
<!--          command="downloadImage"-->
<!--          icon="image"-->
<!--          text="下载图像"-->
<!--          label="下载图像"-->
<!--        />-->

<!--      </button>-->
    </div>
  </toolbar>
</template>

<script>
import { Toolbar } from 'vue-flowchart-editor'
import ToolbarButton from './ToolbarButton'

export default {
  name: 'FlowToolbar',

  components: {
    Toolbar,
    ToolbarButton
  },

  props: ['chartData', 'toggleReadOnly', 'readOnly'],

  methods: {
    generateData() {
      console.log(JSON.stringify(this.chartData))

    },
    handleToggleReadOnly() {
      // ugly
      this.$parent.$parent.$parent.$emit('toggle-read-only')
    }
  }
}
</script>

<style lang="less">
.toolbar {
  display: flex;
  align-items: center;
  height: 20px;

  .split {
    width: 10px;
    height: 100%;
    border-right: 1px solid #eee;
    margin-right: 10px;
  }

  .pull-right {
    display: flex;
    align-items: center;
    margin-left: auto;
  }

  .command {
    display: flex;
    color: #333;

    i {
      display: block;
      width: 27px;
      height: 27px;
      margin: 0 6px;
      padding-top: 10px;
      text-align: center;
      border: 1px solid #fff;
      cursor: pointer;
    }

    span {
      display: block;
      font-size: 12px;
      padding-top: 10px;
      margin-left: -6px;
      padding-right: 6px;
      line-height: 20px;
      cursor: pointer;
    }

    &:hover {
      color: #1890ff;
    }
  }

  .disable {
    color: rgba(0, 0, 0, 0.25);
    i {
      cursor: not-allowed;
    }

    span {
      cursor: not-allowed;
    }

    &:hover {
      color: rgba(0, 0, 0, 0.25);
    }
  }
}
</style>
